import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Button, Input, Spin, Table, message, InputNumber, Drawer } from 'antd';
import styles from "./index.less";
import { runInThisContext } from 'vm';


const FormItem = Form.Item;
class Small extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login: false,
      totala: 0,
      page: 1,
      pageSize: 10,
      similarList: [],
      query: '', // 搜索的关键词
      minWordCount: '', // 最小字数
      maxWordCount: '', // 最大字数
      minAskCount: '',  // 最小询问次数
      maxAskCount: '',  // 最大询问次数
      order: 'wordCount',   // 排序字段
      sort: 'asc',  //  排序方式，asc：升序，desc：降序,
      dxList: [],
      selectedRowKeys: [],
    };
  }

  componentDidMount() {
    this.knowledgeQuestionList()
  }

  componentWillReceiveProps(nextProps, nextContext) {
    console.log('111', nextProps)
    if (nextProps.ProgressName===false) {
      // this.props.form.setFields({ "inputA": "" })
      this.knowledgeQuestionList()
    }
  }

  sx = () => {
    this.props.form.setFields({ "inputA": "" })
    let user = this.userInfo()
    console.log(user)
    this.setState({
      query: user.inputA,
    }, () => {
      this.knowledgeQuestionList()
    })
  }

  knowledgeQuestionList = () => {
    this.setState({ login: true })
    const { dispatch, currentUser } = this.props;
    const { page, pageSize, query } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeQuestionChatList',
        payload: {
          query,
          page,
          limit: pageSize,
        },
        callback: res => {
          console.log('问题库列表', res);
          if (res.code === 0) {
            let a = res.data.list
            a.a = res.data.list.chatResult
            this.setState({
              similarList: a,
              totala: res.data.total,
              login: false
            })
          }
        },
      });
    });
  }

  pageWay = (a) => {
    console.log(a)
    this.setState({ page: a }, () => {
      this.knowledgeQuestionList()
    })

  }

  onShowSizepageWay = (a, b) => {
    console.log(a, b)
    this.setState({ page: a, pageSize: b }, () => {
      this.knowledgeQuestionList()
    })

  }

  // 表单数据
  userInfo = () => {
    return this.props.form.getFieldsValue();
    // 使用方法 
    // let user  = this.userInfo()
    // console.log(user)
  }

  // 删除回调
  knowledgeQuestionDelete = (ids) => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeQuestionDelete',
        payload: {
          ids,
        },
        callback: res => {
          console.log('删除问题库中的问题', res);
          if (res.code === 0) {
            message.success(`${res.msg}`)
            this.setState({
              login: false,
              selectedRowKeys: [],
              dxList: []
            }, () => {
              this.knowledgeQuestionList()
            })
          }
        },
      });
    });
  }

  // 引导黑名单回调
  knowledgeQuestionDelete = (ids, url) => {
    if (ids.length === 0) {
      message.error('请先选择需要操作内容')
    } else {
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: url,
          payload: {
            ids,
          },
          callback: res => {
            console.log('删除问题库中的问题', res);
            if (res.code === 0) {
              message.success(`${res.msg}`)
              this.setState({
                login: false,
                selectedRowKeys: [],
                dxList: [],
              }, () => {
                this.knowledgeQuestionList()
              })
            }
          },
        });
      });
    }

  }

  deleteTable = (item) => { // knowledgeQuestionDelete
    this.setState({ login: true })
    console.log(item)
    this.knowledgeQuestionDelete(Array(item.id), 'knowledgeSmartMaintenance/knowledgeQuestionChatDelete')
  }

  deleteTables = (item) => {
    this.setState({ login: true })
    console.log(item)
    this.knowledgeQuestionDelete(Array(item.id), 'knowledgeSmartMaintenance/knowledgeQuestionChatBlacklist')
  }

  handleOpen = (item) => {
    console.log(item)
    

  }



  // 批量删除
  batchDelete = () => {
    const { dxList } = this.state
    console.log(dxList)
    this.knowledgeQuestionDelete(dxList, 'knowledgeSmartMaintenance/knowledgeQuestionChatDelete')
  }

  // 批量移到黑名单
  moveBlacklist = () => { // questionBlacklistMoveIn
    const { dxList } = this.state
    console.log(dxList)
    this.knowledgeQuestionDelete(dxList, 'knowledgeSmartMaintenance/knowledgeQuestionChatBlacklist')
  }


  // 查询
  theQuery = () => {
    let user = this.userInfo()
    console.log(user)
    this.setState({
      query: user.inputA,
    }, () => {
      this.knowledgeQuestionList()
    })
  }



  //   ----------  
  // 重新识别
  discern = () => {
    console.log('重新识别')
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeQuestionChatSubmit',
        payload: {},
        callback: res => {
          console.log('开始闲聊任务', res);
          if (res.code === 0) {
            message.success(`${res.msg}`)
            this.knowledgeQuestionList()
            this.props.gress(res.code)
            //  进入进度条
          }
        },
      });
    });
  }

  // 批量忽略
  ignore = () => {
    console.log('批量忽略')
    const { dxList } = this.state
    console.log(dxList)
    this.knowledgeQuestionDelete(dxList, 'knowledgeSmartMaintenance/knowledgeQuestionChatIgnore')
  }

  // 忽略
  neglect = () => {
    console.log('忽略') // knowledgeQuestionChatIgnore
    this.setState({ login: true })
    console.log(item)
    this.knowledgeQuestionDelete(Array(item.id), 'knowledgeSmartMaintenance/knowledgeQuestionChatIgnore')
    
  }



  render() {
    const { getFieldDecorator } = this.props.form;
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        let a = []
        selectedRows.map((item, index) => {
          a.push(item.id)
        })
        this.setState({ dxList: a, selectedRowKeys, })
      },
    };
    const columns = [
      {
        title: '问题组',
        width: '300px',
        dataIndex: 'chatResult',
        render: (text, item, index) => {
          return <p key={index}>{item.chatResult.question}</p>
        }
      },
      {
        title: '闲聊相似度',
        dataIndex: 'a',
        width: '160px',
        render: (text, item, index) => {
          return <p key={index}>{item.chatResult.confidence}</p>
        }
      },
      {
        title: '操作',
        render: (text, item) => {
          return <div className={styles.flexBj}>
            <div
              style={{ marginRight: 10, marginBottom: 4 }}
              className={styles.buttong3}
              onClick={() => { this.neglect(item) }}>
              <span><Icon size="small" type="eye-invisible" style={{ marginRight: 5 }} />
              </span><span>忽略</span>
            </div>

            <div
              style={{ marginRight: 10, marginBottom: 4 }}
              className={styles.buttongl}
              onClick={() => { this.deleteTable(item) }}>
              <span><Icon size="small" type="delete" style={{ marginRight: 5 }} />
              </span><span>删除</span>
            </div>

            <div
              style={{ marginRight: 10, marginBottom: 4 }}
              className={styles.buttong2}
              onClick={() => { this.deleteTables(item) }}>
              <span style={{whiteSpace:'nowrap'}}><Icon size="small" type="user-delete" style={{ marginRight: 5 }} />
              </span><span style={{whiteSpace:'nowrap'}}>转移到黑名单</span>
            </div>
          </div>
        }
      },
    ]
    return (

      <div style={{ minHeight: 'calc(100vh - 150px)', background: '#ffffff' }}>

        <Row>
          <Form style={{ marginBottom: 20 }} layout="inline">
            <FormItem  className='zdyButtonF'>
              <Button onClick={this.ignore} type='primary'>批量忽略</Button>
            </FormItem>
            <FormItem>
              <Button onClick={this.batchDelete} type='primary'>批量删除</Button>
            </FormItem>
            <FormItem className='zdyButtonB'>
              <Button onClick={this.moveBlacklist} type='primary'>移到黑名单</Button>
            </FormItem>
            <FormItem className='zdyButtonC'>
              <Button onClick={this.discern} type='primary'>重新识别</Button>
            </FormItem>
            <span style={{ float: "right" }}>
              <FormItem>
                {getFieldDecorator('inputA', {
                  initialValue: '',
                })(
                  <Input onPressEnter={()=>{this.theQuery()}} placeholder="多个关键词空格隔开" style={{ width: 200 }}></Input>
                )}
              </FormItem>
              <FormItem className='zdyButtonZ'>
                <Button onClick={this.theQuery} type="primary" icon="search">查询</Button>
              </FormItem>
            </span>
          </Form>
          <Spin spinning={this.state.login}>
            <Table
              // className='zdyTable'
              rowSelection={rowSelection}
              style={{ padding: '20px 0px 0px 0px' }}
              columns={columns}
              dataSource={this.state.similarList}// 数据
              // onChange={this.handleChange}
              pagination={{  // 分页
                total: this.state.totala,
                pageSize: this.state.pageSize,  // 显示几条一页
                current: this.state.page, // 当前页
                showSizeChanger: true,  // 是否显示可以设置几条一页的选项
                showQuickJumper: true,
                onChange: this.pageWay,
                onShowSizeChange: this.onShowSizepageWay
              }}
            />
          </Spin>
        </Row>
      </div>
    );
  }


}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(Small));